<template>
  <div style="display:inline-block;margin-left:10px" v-if="handleShow()">
   <template v-if="row.status === 3 && userInfo.type === 1 && row.type !== 14">
      <el-button type="primary" size="mini" @click="handleConfirm">
        立即收货
      </el-button>
    </template>
    <!-- 委托代购 -->
    <template v-else-if="row.status === 2 && userInfo.type === 1 && row.type == 13">
      <el-button type="primary" size="mini" @click="handleConfirm">
        完成交易
      </el-button>
    </template>

    <!-- 物流订单 -->
    <template v-else-if="row.status === 2 && userInfo.type === 2 && row.logicId != 0">
      <template v-if="row.type == 31"><!-- 众茶优选订单 -->
        <el-button v-if="row.type == 31 && row.cartType == 1" type="primary" size="mini" @click="sendOrder">
          立即发货
        </el-button>
      </template>

      <template v-else>
        <el-button  type="primary" size="mini" @click="sendOrder">
          立即发货
        </el-button>  
      </template>
    </template>

    <!-- 自提订单 -->
    <template v-else-if="row.status === 2 && userInfo.type === 2  && row.logicId == 0">
      <template v-if="row.type == 31"><!-- 众茶优选订单 -->
        <el-button v-if="row.type == 31 && row.cartType == 1" type="success" size="mini" @click="handleSelfPick">
          确认发货
        </el-button>
      </template>

      <template v-else>
        <el-button type="success" size="mini" @click="handleSelfPick">
          确认发货
        </el-button>
      </template>
    </template>

    <!--  //委托代售 待付款 立即发货 -->
    <!-- <template v-else-if="row.type === 14 && row.status === 2">
      <el-button type="primary" size="mini" @click="sendOrder">
        立即发货
      </el-button>
    </template> -->

    <el-dialog title="立即发货" append-to-body :visible.sync="dialogFormVisible" width="480px">
      <el-card shadow="hover">
        <div slot="header" style="text-align:left">
          <span>快递信息</span>
        </div>
        <el-form :model="createLogicInfo" ref="createLogicInfoForm" :rules="createLogicInfoRules" label-position="right"
          label-width="100px">
          <el-form-item label="快递单号：" prop="logicNo">
            <el-input v-model="createLogicInfo.logicNo" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="快递公司：" prop="logicRemark">
            <!-- <el-input v-model="createLogicInfo.logicRemark" placeholder="请输入" /> -->
						<el-autocomplete
						  v-model="createLogicInfo.logicRemark"
						  :fetch-suggestions="querySearchAsync" :debounce=0
						  placeholder="请输入"
						  @select="handleSelect"
							style="width: 100%;"
						></el-autocomplete>
          </el-form-item>
        </el-form>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSend()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mallOrderSend, mallOrderConfirm, queryLogCode, orderPick,
  orderGetById} from '@/api/mall'
export default {
  name: 'ConfirmButton',
  props: {
    row: {
      type: Object,
      default: () => ({})
    },
    userInfo: {
      type: Object,
      default: () => ({})
    },
    orderStatusJson: {
      type: Array,
      default: () => []
    },
    orderTypeJson: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      createLogicInfo: {
        logicNo: 1,
        logicRemark: ''
      },
      createLogicInfoRules: {
        logicNo: [{ required: true, message: '请输入', trigger: 'blur' }],
        logicRemark: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
			restaurants:'',
			logicId:''
    }
  },
  watch: {
    row(val) {
      this.$nextTick(() => {
        this.handleShow()
      })
    },
    userInfo(val) {
      this.$nextTick(() => {
        this.handleShow()
      })
    },
		// 快递公司查询
		// 'createLogicInfo.logicRemark':{
		// 	handler(newVal) {
		// 		// 查询
		// 		queryLogCode({name:newVal}).then((res) => {
		// 			console.log(res);
		// 			this.restaurants = res.map((item)=>({
		// 				value: item.name,
		// 				label: item.id,
		// 			}))
		// 		}).catch((err) => {
		// 			console.log(err);
		// 		})
		// 	},
		// 	deep: true //深度监听对象的变化
		// }
  },
  created() {
    this.$nextTick(() => {
      this.handleShow()
    })

  },
  methods: {
    handleShow() {
      if (this.row.status === 2 || this.row.status === 3) {
        return true
      } else {
        return false
      }
    },
		querySearchAsync(queryString, cb) {
      this.restaurants = []
      cb(this.restaurants);

      if (queryString === '') {
        return
      }

      if(this.timeout){
        clearTimeout(this.timeout)
      }
      let _this = this;
      this.timeout = setTimeout(() => {
        // 查询
        queryLogCode({name:queryString}).then((res) => {
					_this.restaurants  = res.map((item)=>({
						value: item.name,
						label: item.id,
					}))
          cb(_this.restaurants);
          _this.$forceUpdate();
				}).catch((err) => {
					console.log(err);
				})
      }, 1000);
		},
		createStateFilter(queryString) {
			return (state) => {
				return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
			};
		},
		handleSelect(item) {
			console.log(item);
			this.logicId = item.label;
		},
    handleSend() {
      if (!this.logicId) {
        this.$message.error("请选择下拉框的快递公司")
        return
      }
      
      this.$refs["createLogicInfoForm"].validate((valid) => {
        if (valid) {
          const params = {
            logicNo: this.createLogicInfo.logicNo,
            logicRemark: this.createLogicInfo.logicRemark,
            id: this.row.id,
						logicId:this.logicId
          }

          mallOrderSend(params).then(() => {
            this.$emit('getList')
            this.dialogFormVisible = false;

            this.$message({
              message: '操作成功',
              type: 'success'
            });
          });
        }
      });
    },
    sendOrder() {
      if (this.row.logicId != 0) {
        orderGetById({ id: this.row.id }).then(res => {
          var orderDetail = Object.assign({}, res)
          this.handleData(orderDetail)
        }).catch(err => {
          console.log(err)
        })
      }
    },
    handleData(orderDetail) {
      if (orderDetail.logicRemark && orderDetail.logicRemark == "德邦快递") {
        this.createLogicInfo.logicNo = orderDetail.logicNo
        this.createLogicInfo.logicRemark = '德邦快递'
        this.logicId = '13'
      } else {
        this.createLogicInfo.logicNo = ''
        this.createLogicInfo.logicRemark = ''
        this.logicId = ''
      }

      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs['createLogicInfoForm'].clearValidate()
      })
    },
    handleConfirm() {
      this.$confirm("因确认收货后将不能再退货处理，为保障您的售后利益，请在收到货物后检验是否符合要求再按立即收货，请确认立即收货？").then(() => {
        mallOrderConfirm({ id: this.row.id }).then(() => {
          this.$emit('getList')
          
          this.$message({
            message: '操作成功',
            type: 'success'
          });
        });
      });
    },
    handleSelfPick() {
      this.$confirm("是否确认立即发货？").then(() => {
        orderPick({ id: this.row.id }).then(() => {
          this.$emit('getList')
          
          this.$message({
            message: '操作成功',
            type: 'success'
          });
        });
      });
    }
  }
}
</script>
